<!DOCTYPE html> 
<html> 
<head> 
 
	<title>smoke.js</title> 

	<!-- include these -->
	<link rel="stylesheet" href="smoke/smoke.css" type="text/css" media="screen" />  
	<script src="smoke/smoke.min.js" type="text/javascript"></script>
	
	<!-- you only need this if you want to include a theme...duh -->
	<link id="theme" rel="stylesheet" href="smoke/themes/default.css" type="text/css" media="screen" />

	<!-- styles/js for the demo page. ignore them...or don't. i don't really care. -->
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<link rel="stylesheet" href="customAlert.css" type="text/css" media="screen" />  


	<script>

		$(function(){
			$("#shortthemes a").click(function(e){
				e.preventDefault();
				$("link#theme").attr('href',$(this).attr('href'));
				$("#shortthemes a").removeClass('selected');
				$(this).addClass('selected');
			});
		});
		

		function tstconfirm(){
			smoke.confirm('this is still cool, yeah?',function(e){
				if (e){
					smoke.alert('OK pressed');
				}else{
					smoke.alert('CANCEL pressed');
				}
			});
		}
		
		function tstprompt(){
			smoke.prompt('what\'s my name?',function(e){
				if (e){
					smoke.alert('my name is '+e);
				}else{
					smoke.alert('no');
				}
			},{value:"skrillex"});
		}		

	</script>

</head> 
<body> 

	<div id="content">
		<div id="head">
			<img src="" width="263" height="63" />
		</div>

		
		<div id="demo">
			<a onClick="javascript:smoke.alert('this is a normal alert');">smoke.alert('this is a normal alert');</a>
			<a onClick="javascript:smoke.signal('this goes away after a sec');">smoke.signal('this goes away after a sec');</a>
			<a onClick="javascript:tstconfirm();">smoke.confirm('behaves like a normal confirm?');</a>
			<a onClick="javascript:tstprompt();">smoke.prompt('behaves like a normal prompt?');</a>
		</div>


		
		<hr />


		<p>You can implement these the same way you'd use the js alert()...just put "smoke." in front of it.</p>

		<p>The confirm() replacement, however, needs to be used just a little differently:</p>
		
		<pre>smoke.confirm('this is still cool, yeah?',function(e){
	if (e){
		smoke.alert('OK pressed');
	}else{
		smoke.alert('CANCEL pressed');
	}
});</pre>

		<p>prompt(), similarly:</p>

		<pre>smoke.prompt('what\'s my name?',function(e){
	if (e){
		smoke.alert('my name is '+e);
	}else{
		smoke.alert('no');
	}
});</pre>

		


		<p>And if you want the smoke.alert() to behave exactly like a native alert(), you can have subsequent actions happen in a callback like so:</p>
		
		<pre>smoke.alert('look at that alert, man.', {}, function(){
	// oh what now?
});</pre>


	


		<hr />

		<p>Want to do custom button labels? Try this:</p>
		
		<pre>smoke.alert('this is cool', {ok:"yeah it is"});
		
smoke.confirm('this is still cool, yeah?',function(e){
	if (e){
		smoke.alert('OK pressed');
	}else{
		smoke.alert('CANCEL pressed');
	}
}, {ok:"yeah it is", cancel:"no way"});		
		</pre>
		

		


		<p>Need a default value for a prompt? Prepare to be amazed:</p>
		
		<pre>smoke.prompt('what\'s for dinner? (omg please say pizza, please say pizza)',function(e){
	if (e){
		smoke.alert(e);
	}else{
		smoke.alert('no');
	}
},{value:"pizza"});		
		</pre>
		

		
		
		<p>Maybe you want to specify different styles for a specific alert. Just add a classname parameter like this:</p>
		
		<pre>smoke.alert('this is cool', {classname:"myclassname"});</pre>
		

		<hr />


		<div id="shortthemes">
			<a href="smoke/themes/default.css" class="selected">light style (default)</a>
			<a href="smoke/themes/dark.css">dark style</a>
			<a href="smoke/themes/100s.css">100s style</a>
			<a href="smoke/themes/tiger.css">tiger style</a>
		</div>


	</div>


</body> 
</html>